<template>
  <baseCard
    :height="distributionHight"
    :title="'咨询分布'"
    :contentStyle="contentStyle"
    style="margin-right: 0; margin-left: 0"
  >
    <div class="sm-data-echarts-layout">
      <arco-table
        :columns="columns"
        :bordered="{ cell: true }"
        :data="distributionTable"
        :pagination="false"
        :scrollbar="true"
        :scroll="scroll"
        :hoverable="true"
      >
        <template #tel_num="{ record }">
          <span>
            {{ addThousandsSeparator(record.tel_num) }}
          </span>
        </template>
        <template #ydy_num="{ record }">
          <span>
            {{ addThousandsSeparator(record.ydy_num) }}
          </span>
        </template>
        <template #ql_num="{ record }">
          <span>
            {{ addThousandsSeparator(record.ql_num) }}
          </span>
        </template>
        <template #tel_per="{ record }">
          <span>
            {{ addThousandsSeparator(record.tel_per) }}
          </span>
        </template>
        <template #ydy_per="{ record }">
          <span>
            {{ addThousandsSeparator(record.ydy_per) }}
          </span>
        </template>
        <template #ql_per="{ record }">
          <span>
            {{ addThousandsSeparator(record.ql_per) }}
          </span>
        </template>
        <template #tel_bad="{ record }">
          <span>
            {{ addThousandsSeparator(record.tel_bad) }}
          </span>
        </template>
        <template #ydy_bad="{ record }">
          <span>
            {{ addThousandsSeparator(record.ydy_bad) }}
          </span>
        </template>
        <template #ql_bad="{ record }">
          <span>
            {{ addThousandsSeparator(record.ql_bad) }}
          </span>
        </template>
      </arco-table>
    </div>
  </baseCard>
</template>

<script setup>
import { reactive } from "vue";
import BaseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";

// 父组件传值
const props = defineProps({
  distributionHight: { type: String, default: "10.3rem" },
  tableData: {
    type: Array,
    default: [],
  },
  distributionTable: { type: Array, default: [] },
});

const contentStyle = {
  paddingTop: 0,
};

// 表格相关
let columns = reactive([
  {
    title: "序号",
    dataIndex: "xh",
    width: 56,
    align: "left",
  },
  {
    title: "应用/菜单名称",
    dataIndex: "system_name",
    width: 140,
    align: "left",
  },
  {
    title: "咨询量",
    width: 210,
    align: "center",
    children: [
      {
        title: "电话",
        tooltip: true,
        dataIndex: "tel_num",
        slotName: "tel_num",
        align: "right",
        width: 70,
      },
      {
        title: "一对一",
        tooltip: true,
        dataIndex: "ydy_num",
        slotName: "ydy_num",
        align: "right",
        width: 70,
      },
      {
        title: "群聊",
        tooltip: true,
        dataIndex: "ql_num",
        slotName: "ql_num",
        align: "right",
        width: 70,
      },
    ],
  },
  {
    title: "办结率",
    width: 216,
    align: "center",
    children: [
      {
        title: "电话",
        tooltip: true,
        dataIndex: "tel_per",
        slotName: "tel_per",
        align: "right",
        width: 70,
      },
      {
        title: "一对一",
        tooltip: true,
        dataIndex: "ydy_per",
        slotName: "ydy_per",
        align: "right",
        width: 70,
      },
      {
        title: "群聊",
        tooltip: true,
        dataIndex: "ql_per",
        slotName: "ql_per",
        align: "right",
        width: 70,
      },
    ],
  },
  {
    title: "差评率",
    width: 216,
    align: "center",
    children: [
      {
        title: "电话",
        tooltip: true,
        dataIndex: "tel_bad",
        slotName: "tel_bad",
        align: "right",
        width: 70,
      },
      {
        title: "一对一",
        tooltip: true,
        dataIndex: "ydy_bad",
        slotName: "ydy_bad",
        align: "right",
        width: 70,
      },
      {
        title: "群聊",
        tooltip: true,
        dataIndex: "ql_bad",
        slotName: "ql_bad",
        align: "right",
        width: 70,
      },
    ],
  },
]);
const scroll = { y: "100%" };
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");
:deep(.arco-table-cell.arco-table-cell-align-left) {
  justify-content: center !important;
}

:deep(.arco-table-cell.arco-table-cell-align-right) {
  justify-content: center !important;
}
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;
}
</style>
